El header es una de las cosas a las que más importancia damos en un diseño, es lo primero que vemos al acceder a una página.Personalmente me gustan poco recargados, un título, una imagen que nos caracterice y ya. Pero... la tentación es grande y probar variaciones no cuesta nada así que ¿por qué no hacerlo?

J.Miur nos mostró  una serie de entradas sobre el header, aprendimos a entenderlo y jugamos un buen rato cambiando, eliminando y añadiendo imágenes a nuestro antojo.
  • Tratando de entender el Header [1] [2]

Pizcos nos explica como añadir un "Header múltiple" algo que más de uno no va a resistirse a probar, estamos a la espera de la segunda parte que promete ser interesante y es lo que más nos gusta a todos la personalización o añadir estilos.

Rosa nos explicaba una idea de BlogU "Dividir la cabecera" el resultado es situar el gadget de cabecera proporcionado por Blogger a la izquierda y añadir a la derecha la posibilidad de añadir un nuevo gadget consiguiendo de esta forma un header con dos bloques para contenido.

No sé si alguien recordará que en lugar del texto "Ni es todo lo que está, ni está todo lo que es" lo que había era el gadget de Twitter, es lo que voy a tratar de explicar porque es la modificación que hice en mi cabecera y  me han preguntado más de una ocasión, la respuesta es "El header está dividido en dos bloques"

En mi plantilla tengo las medidas modificadas así que como suelo hacer los ejemplos serán en una plantilla Minima sin modificar, pueden probarse en cualquier otra plantilla pero es recomendable guardar una copia de respaldo o mejor aún probar en otro blog.

El header de una plantilla Minima viene definido en la hoja de estilos de la siguiente forma [+/-]

#header-wrapper {/* espacio que acoge todo el contenido del header */
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {/* espacio del gadget de la cabecera */
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header { /* espacio interior donde se encuentra el header */
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {/* título del blog */
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {/* estilos para enlace del título */
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {/* estilos para enlace del título al pasar el ratón*/
color:$pagetitlecolor;
}
#header .description {/* texto de la descripción */
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {/* no tiene función alguna */
margin-$startSide: auto;
margin-$endSide: auto;
}




Vamos a dividir el header en dos partes nos situamos en

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>
</div>

y lo sustituimos por

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header' id='header-derecha' showaddelement='yes'/>
</div>

Ya podemos añadir un nuevo hadget en la cabecera, al establecer showaddelement='yes' podemos añadir más de un gadget si añadimos 'no'sólo podemos añadir un gadget.

Para que todo tome forma deberemos añadir unos estilos al nuevo gadget y modificar la medida del antiguo, buscamos:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

y en su lugar añadimos

#header {
width: 300px;
float: left;
margin:0 auto 10px;
text-align: center;
color:#333;
border:1px solid #ccc;
}
#header-derecha {
width: 300px;
float: right;
color: #333;
margin:0 auto 10px;
border:1px solid #ccc;
}

Para eliminar el borde del bloque exterior suprimimos la línea en negrita de:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
También añadiremos el mismo margen que en header y header-derecha margin:0 auto 10px;

Ya sólo queda añadir contenido al nuevo gadget para personalizar el bloque si lo deseamos.



El borde gris nos ayuda para saber si el gadget queda centrado, lo podemos eliminar suprimiendo border:1px solid #ccc;

Si lo que deseamos es darle un toque personal entonces daremos rienda suelta a la imaginación trabajando los estilos de cada bloque.
Subimos o bajamos el nuevo gadget (header-derecha)con margin-top:10px;
Añadimos un fondo con background: transparent url(url imagen);

#header-derecha {
width: 300px;
float: right;
color: #333;
margin:0 auto 10px;
margin-top:10px;
background: transparent url(url imagen);
}

Si por el contrario deseamos que la imagen ocupe todo el bloque del header la añadiremos en header-wrapper proporcionándole altura por ejemplo con height:100px; dependiendo el alto que deseamos darle aumentamos el valor en height.

#header-wrapper {
width: 660px;
margin:0 auto 10px;
height:100px;
background: transparent url(url imagen);
}

Y siguiendo con los cambios lo hacemos esta vez en el estilo de fuente, en header h1

#header h1 {
margin-top: 50px;
font-family: Georgia;
font-size: 24px;
letter-spacing: -1px;
padding: 0;
width: 300px;
}


Al dividir la cabecera tenemos la comodidad de cambiar de gadget sin necesidad de hacer grandes cambios únicamente añadiendo un nuevo gadget en plantilla de diseño y eliminando el anterior o incluso añadir más de un gadget.
No olvidemos que el gadget de cabecera sigue estando así que si preferimos añadir una imagen en lugar de título podemos hacerlo igual que antes de hacer las modificaciones.


¿Izquierda o derecha? salimos de dudas cambiando la flotación de nuevo gadget (header-derecha) por la flotación del gadget de cabecera de forma que quede así.

#header {
width: 300px;
float: right;
margin:0 auto 10px;
text-align: center;
color:#333;
border:1px solid #ccc;
}
#header-derecha {
width: 300px;
float: left;
color: #333;
margin:0 auto 10px;
border:1px solid #ccc;
}

Si decidimos cambiar la flotación y para no crear confusiones lo que hacemos es cambiar el nombre del nuevo gadget y en lugar de llamarle #header-derecha le llamaremos #header-izquierda
Lo mismo haremos con el bloque del gadget, donde dice:
<b:section class='header' id='header-derecha' showaddelement='yes'/>
cambiaremos header-derecha por header-izquierda

Nathan yo

Hola Gema te queria preguntar como hacer para que la cabecera de este blog sea solo una en lugar de dos: http://gr-cade.blogspot.com/

Responder
Gem@

yz Global Metion Blog hay una imagen que puede eliminarse es la siguiente:
http://2.bp.blogspot.com/_t47uhxwKFVM/SmgKoMk7ONI/AAAAAAAABMs/6te3xxlcAUs/s1600/mn2.gif
Si la eliminas de la plantilla quedará solamente el gadget que se posiciona ahora sobre esa imagen.

Responder
Unknown

están empecinados a que el header me vuelva loca...con tanto material :) veré si logro las cositas que rondan por mi cabeza...adiós señorita

Responder
MamaNunes

muy bueno! si se me permite, voy a utilizar como referencia a un puesto en portugués. claro que sus demandas son. gracias!

Responder
Gem@

yz Graciela hay muchas opciones para probar hay que tomarlo como un juego y así incluso es divertido :D

yz Hola MamaNunes, claro que te permito eso ni se pregunta :D

Responder
ElChef

Gracias Gem@ , por todo lo que nos enseñas...:)

Responder
Nathan yo

No Gem lo que pasa es que hay dos arriba y dos mas abajo las dos mas bajas están bien pero las de arriba quisiera solo una en lugar que una derecha e izquierda, quiero solo una centrada para que quede bien la cabecera
ayuda por favor

Responder
Gem@

yz Gracias a ti por comentar cuaresma, eres muy amable :D

yz Global Metion Blog no puedo ver tu blog ahora mismo y sin ver como hiciste para añadir esas imágenes no puedo decirte como puede hacerse.
Si no tienes mucha prisa cuando tenga oportunidad lo miro en el otro PC ;)

Responder
Nathan yo

OK, gracias Gema

Responder
4EverMadonna

La verdad gema que tu blog cada vez me deja sin palabras... mas busco, mas encuentro, mas me quedo mudo... la verdad me saco el sombrero!:D
La verdad que hasta ahora me haz ayudado mucho con mi humilde blog jeje... que ya te habras enterado es sobre Madonna, mas allá de eso es una gran ayuda para todos los "bloggeros" de todas partes contar con tu ayuda.... GRACIAS!

Responder
Alejandra

Gem@ en ToKe de Libélula estamos de sorteo por nuestro primer año con el blog y me he pasado para invitarte a participar.

Un saludo.

Responder
Galileo Galilei

Hola Gema.
A ver, yo quiero poner otra "celda" de añadir gadget justo debajo de la cabecera.El caso es que ayer lo encontré por alguna página, pero hoy no lo consigo ¡me hacen los ojos chirivitas!!.
El que ví, venía ya hecho en HTLM para incluir en alguna parte de la plantilla (ya sabes, para copiar y pegar)¿Me ayudas?.Gracias

Responder
Anónimo

Muchas gracias Gema, lo he implementado en mi blog y ha quedado excelente :D

Responder
[ Michel ]

holaaaa...espeor me puedas ayudar pork nose donde mas buscarrr!!

quiero hacer que al final de cada post....me apresca una valoracion en casillas.... osea k los lecotres marken las casillas k yo eh puesto si esk les gusta o no:

Valoracion: Bueno(0) | Malo(0)| regular(0)|

algo asiii porfavor ayudaaa

Responder
Galileo Galilei

De nuevo Gema :-), en la plantilla que estoy utilizando (que me descargué) si miras verás que a la izda. sale como un calendario que supongo que debería verse el día de la entrada.Pero...no se ve ningún dia solo se lee:UNDEFINED ¿se puede arreglar??:-S
Gracias por tus aportaciones Gema.

Responder
Gem@

yz 4everMdnna gracias por el comentario :D

yz Todo un detalle Alejandra, muchas gracias :)

yz Me alegra mucho Nav!´s voy a verlo :)

yz [ Michel ]eso puedes hacerlo en el siguiente orde, ve a plantilla de diseño y donde dice Entradas del blog haz click en la parte inferior donde dice "Editar" ahí verás la opción de marcar todas las opciones que deseas se vean en el blog entre ellas "Reaciones" que es la que me comentas.

yz Galileo Galilei en respuesta a tu pregunta lo ideal sería para añadir nuevo gadget justo debajo de la cabecera, en el crosscol.
Y aquí puedes ver como hacerlo:
http://gemablog-.blogspot.com/2009/02/personalizar-el-crosscol.html
El tema de la fecha veo que ya lo has solucionado.

yz Global Metion Blog no me olvido es que durante estos días de ausencia el correo está saturado :O pero lo busco :)

Responder
Sib

Hola Gema llevo días queriendo modificar la cabecera para dividirla, pero me veo incapaz algún fantasma se ha apoderado de mis códigos y siempre me dice que no están bien cerrados y cosas por el estilo, sigo al pie de la letra tus indicaciones pero nada sabes que puede pasar???
Un abrazo grande

Responder
Gem@

yz Hola Sib, si te dice que no está bien cerrado mira se olvidaste añadir algún div. Lo he comprobado y el código está correcto :O

Responder
Nessa

Oops...si mi codigo no es como ese como hago?
es decir para divir el header en 2?

mira aca t dejo el mio XD
Muchas Gracias

/*-- (Cabecera) --*/

#header-wrapper {
height:374px;background:#D8D8D8 url() repeat-x;position:relative;overflow:hidden;
}
.header_top{position:absolute;width:100%;height:3px;background:#D8D8D8;line-height:0px;font-size:1px;}
.header_nv_corner,.header_ne_corner{width:8px;height:8px;position:absolute;top:0px;line-height:0px;font-size:1px;}
.header_nv_corner{left:0px;background:url();}
.header_ne_corner{right:0px;background:url();}

#header_bg1 {
background:url() left top no-repeat;
}

.header_bg2 {
background:url(http://i32.tinypic.com/dwc213.jpg) center top no-repeat;
}

#header-inner {
height:120px;padding-top:34px;padding-left:128px;
}

.titlewrapper h1 {
margin:0px;margin-bottom:0px;font-family:tahoma;font-size:30px;font-weight:normal;
}

.titlewrapper h1, .titlewrapper h1 a, .titlewrapper h1 a:visited {
color:$colortituloblog;text-decoration:none;
}

#header-wrapper p {
color:$descripcioncolor;font-family:tahoma;font-size:14px;font-weight:bold;
margin:0; padding:0 0 0 40px;
}


.header_bottom_v{width:0px;left:0px;background:url();}
.header_bottom_e{width:50px;right:0px;background:url();}

Responder
Gem@

yz Lo que me añades son los estilos Nessa , debes buscar el bloque de div id='header-wrapper y hacer ese paso de sustituirlo por el de la entrada de forma que se añade un nuevo bloque para el header, luego, se añaden los nuevos estilos y se reduce el ancho del header antiguo.
Todo eso en otro blog con la misma plantilla para no llevarte disgustos ;)

Responder
Nessa

Ok Gem@ mil gracias..ya entendi lo que era..perdon x la pregunta anterior XD Deberia haber investigado mas!
Ahora lo probe y cambie mi codigo por ese y me dice q no esta bien cerrado..
En si me dice esto:
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "body" must be terminated by the matching end-tag "".

Porque mi cod tiene mas cosas q el q vos das de ejemplo..tal vez es eso XD No me deja publicar el cod..pero t dejo la imagen para q lo veas...es este:
http://s4.subirimagenes.com/privadas/previo/thump_661884codigo.jpg

Responder
Nessa

Gem@ ya esta..mil perdones x dejar tantos comentarios jaja
al final le meti mano y andubo re bien =D
Gracias

Responder
Gem@

yz No hay nada que perdonar Nessa ¿era la etiqueta body sin cerrar?

Responder
Kartlingas

Hola Gem@

Llevo tiempo escribiendo un blog y, debido a mi desconocimiento de css, html... hasta ahora había utilizado una plantilla, hecho algunas modificaciones... pero poco. El caso es que quería rediseñarlo y me estoy empapando de tus enseñanzas, pero la de dividir el header se me ha atragantado y no consigo que, una vez este modificado, aparezcan las dos cabeceras, sólo me aparece la header-derecha.

Podrías por favor echarle un vistazo y decirme que estoy haciendo mal??

Muchísimas gracias. Por cierto, el blog es http://kartlingasmakingof.blogspot.com

Responder
Kartlingas

Hola de nuevo Gem@

Ya lo he conseguido, el problema me lo estaba dando el cross-col, lo he quitado y ya me deja dividir la cabecera.

Muchas gracias por toda la informacion que compartes con los demas, me esta viniendo de perlas.

Un saludo

Responder
Gem@

:: Que alegría Kartlingas ya sabes eso de más vale tener maña que ser mañoso :)

Responder
Noe

¡Hola! Oye Gema, quería preguntarte como puedo poner el header centrado, y no alineado a la izquierda. ¡Gracias!;)

Responder
Gem@

:: Mundo Perruno en añade para los estilos de la imagen:
background-position:center center;

Responder
Susana

Hola Gem@,
He intentado varias veces y no me sale, creo que el problema no es mio, quizá sea de blogger, mira este es el resultado:

http://www.facebook.com/photo.php?pid=203340&l=bd1eee3e9d&id=100000640207461

En realidad el header de la izquierda no lo voy a utilizar, voy a retirar el título, solo utilizaré el header derecho y aplicar un diseño completo para el fondo de los dos headers, pero si es que no hay solución, ¿habrá algún problema con dejarlo así?, porque cuando voy a la vista previa se ve cada header en su lugar.
Gracias!

Responder
Gem@

:: Susana tendría que ver el blog donde estás aplicando esos cambios pero tu perfil no está disponible :S

Responder
Susana

Hola Gem@!
Esta es mi web:
http://svblogdepruebas.blogspot.com/

Pero no solo me permite colocar gadgets a lado derecho, así:
http://www.facebook.com/photo.php?pid=209735&l=e660d3d344&id=100000640207461

También a lado izquierdo, así:
http://www.facebook.com/photo.php?pid=209738&l=0b05cb0bbe&id=100000640207461
Y en la vista previa la imagen aparece justo debajo del header izquierdo, no molesta a la imagen del header derecho.

Gracias!.

Responder
Gem@

:: Problema en dejarlo así no hay ninguno, aunque en la plantilla de diseño lo veas extraño lo cierto es que el resultado es correcto pero si no estás conforme se puede probar en otro blog y ver los resultados para descartar algún error en los cambios.

Responder
Susana
Este comentario ha sido eliminado por el autor.
Responder
Susana
Este comentario ha sido eliminado por el autor.
Responder
Susana

Hola Gem@! gracias por la respuesta y disculpa por borrar mis comentarios.
Ya probé en otro blog que tengo, y ocurre exáctamente lo mismo.

Todo estaba bien hasta que decidí usar el crosscol y me fijo que en "Diseño" no se veia!!, pero en la plantilla si está el código.
Estuve probando en "Diseño" para ver si lograba que en vista previa se viera el crosscol y queria que vieras las imagenes, pero antes decidí mejor probar como quedaria si le colocaba tres columnas en la sección del crosscol (algo que necesito), y resulta que todo mejoró, mira:

http://www.facebook.com/photo.php?pid=211459&l=753ffd4c73&id=100000640207461
(aunque el header de la derecha está un poco pegado al margen.)

http://svblogdepruebas.blogspot.com/

Hasta luego y otra vez gracias!

Responder
Gem@

:. Pues estamos haciendo lo mismo :D yo también estaba añadiendo dos gadgets sobre el main :)

Lo que me dices del margen está bien queda el mismo espacio a los dos lados, lo que yo haría sería subir la imagen en un gadget de html en lugar de un gadget de imagen y la centras en el mismo código:
<center><img src="url-de-la-imagen"> </center>

Responder
Harry

Hola gema... aunque he querido, no he podido dividir el header de mi plantilla... mas que nada porque estoy usando las nuevas plantillas del diseñador de blogger y estas no traen el header-wrapper por ningún lado.

Responder
Gem@

:: Las plantillas con el diseñador no traen los estilos definidos como en las originales, sería cuestión que lo intentaras en un blog de pruebas y de esa forma ver donde hacer los cambios :S

Responder
Jose Escudero

Hola Gemma,
Mi plantilla es de las nuevas y no encuentro el lugar para poner los códigos para dividir el header. Me puedes ayudar?
Mi blog es http://elmundobasedow.blogspot.com/.
Un saludo y gracias.
Ah enhorabuena por tu blog.

Responder
Gem@

:: Saludos Blincacequias, te respondo lo mismo que a otros usarios de las nuevas plantillas, no me he familiarizado aún con ellas porque son un tanto confusas para poder dar una opinión sin probar antes, el header-wrapper en tu plantilla viene como header-outer es cuestión de probar haciendo los mismos cambios pero teniendo en cuenta que no vas a encontrar los mismos nombres que aquí se detallan, eso si, cualquier intento de cambio o modificación en un blog de pruebas por si acaso ;)

Responder
Unknown

Hola, buenisimo el post! te pregunto tengo un problema en el blog. No puedo sacar una barra negra que me aparece! Me podrías ayudar? el link es http://excelparalagestion.blogspot.com/ .Debajo del Titulo del blog esta la barra, y la quiero sacar!!Gracias

Responder
Gem@

:: Hola Federico esa barra es una imagen añadida directamente en los estilos de un menú si eliminas la url de la imagen ya desaparece:

.menu-primary-wrap {
background: url("http://3.bp.blogspot.com/-qjfI9NBTgRw/TjhQAJP_HzI/AAAAAAAAAVk/-topGvMsY5M/s000/menu-primary-bg.png") repeat-x scroll left top transparent;
height: 40px;
margin-left: 15px;
padding: 0;
position: relative;
z-index: 400;
}

Responder
victorache

Hola Gem@!
Esta muy interesante tu blog y quisiera que me ayudar con el mio por favor :)
Ya estoy medio loco ya que he intentado de muchas maneras poner algo como lo que tu tienes en la cabecera de tu blog y la verdad soy principiante en esto del blogger y no he sido capaz.

Quiero añadirle a la cabecera unos botones de las redes sociales como los que tu tienes.

Si puedes ayudarme estaría inmensamente agradecido contigo.

Muchas Gracias!

pd: este es mi blog http://www.arteentorno.com/

Responder
ofo1965

Hola Gema, hacía mucho tiempo que no probava. Me estoy fijando en los iconos de redes sociales que tienes en la cabecera. ¿Para eso hace falta dividir el header?. Yo queria situar unas imagenes ahí, pequeñas, y que quedaran lo mas arrimadas al top, en la misma linea del top o a la derecha organizadas en vertical. ¿Que me dices?.
Gracias.

Responder
Gem@

:: Hola ofo1965 mucho tiempo sin verte!!
Los iconos sepueden añadir directamente a la plantilla o en un gadget de html que es como yo los tengo (cabecera dividida).
Puedes escoger según veas pero si te decides por añadirlos en la plantilla no te olvides de tener copia de respaldo porque siempre es un riesgo.

Responder
ofo1965

Muchas gracias de nuevo. Haces bien en recordarme que tengo que hacer copia de seguridad.

Gem@

Por experiencia sé que ese error puede llevarnos tiempo subsanarlo. Al igual que también deberíamos hacer de vez en cuando una descarga del blog (persona prevenida vale por dos)

Responder
Unknown

buenas, me gustaría saber si me puedes ayudar a juntar como si fuesen una las dos imagenes de la cabecera en este blog http://alacenademeigas.blogspot.com.es/

gracias!!!!!

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top